<template>
  <div class="editprod">
    <h1>商品编辑</h1>
    <h2>修改即在商品展示同步（但榜单排列需再次点击榜单刷新）</h2>
    <div class="xg" v-for="item in sp.imgList" :key="item.id">
       <img :src="require('@/assets/' + item.imgURL)" alt="">
        <ul>
            <li>名称：<input type="text" v-model="item.title"></li>
            <li>热度：<input type="number" v-model="item.hot"></li>
            <li>畅销：<input type="number" v-model="item.sale"></li>
            <li>流量：<input type="number" v-model="item.visits"></li>
        </ul>
    </div>
  </div>
</template>

<script>
import sp from "@/assets/sp.js"
export default {
data(){
    return{
        sp,
    }
}
}
</script>

<style scoped>
.editprod{
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
}
h1,h2{
    text-align: center;
}
.editprod .xg{
    width: 45%;
    height: 200px;
    border: 1px solid black;
    padding: 5px;
    margin: 5px auto;
}
.editprod .xg img{
    width: 100px;
    height: 100px;
}
.editprod .xg ul li input{
    width: 70%;
}
</style>